<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>路线详情</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/route-detail.css">



</head>

<body>
<!--引入头部-->
<div id="header"></div>
    <!-- 详情 start -->   
    <div class="wrap">
        <div class="bread_box">
            <a href="index.html">首页</a>
            <span style="color: red"> 产品详情&gt;</span>
        </div>
        <div class="prosum_box">
            <dl class="prosum_left">
                <dt>
                    <img alt="" class="big_img" src="images/p1.jpg">
                </dt>
                <dd id="dd">
                    <a class="up_img up_img_disable"></a>
                    <a title="" class="little_img" data-bigpic="images/p1.jpg">
                        <img src="images/p1.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="images/p2.jpg">
                        <img src="images/p2.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="images/p3.jpg">
                        <img src="images/p3.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="images/p4.jpg">
                        <img src="images/p4.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="images/p5.jpg"style="display:none;">
                        <img src="images/p5.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="images/p5.jpg"style="display:none;">
                        <img src="images/p5.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="images/p5.jpg"style="display:none;">
                        <img src="images/p5.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="images/p5.jpg"style="display:none;">
                        <img src="images/p5.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="images/p5.jpg"style="display:none;">
                        <img src="images/p5.jpg">
                    </a>
                    <a class="down_img down_img_disable" style="margin-bottom: 0;"></a>
                </dd>
            </dl>
            <div class="prosum_right">
               <p class="pros_title" id="rname">【益生菌】发酵提高免疫力</p>
                <p class="hot" id="routeIntroduce">酸奶生产工艺：牛奶→标准化→调配→杀菌均质→发酵→冷却→灌装→冷藏</p>
                <div class="pros_other">
                    <p >经营商家  ：<span id="sname">牛奶go</span></p>
                    <p >咨询电话 : <span id="consphone">400-618-9090</span></p>
                    <p >地址 ： <span id="address">******</span></p>
                </div>
                <div class="pros_price">
                    <p class="price"><strong id="price">¥199.00</strong><span>起</span></p>
                    <p class="collect">
                        <a class="btn" id="favorite" onclick="addFavorite();"><i class=""></i>点击收藏</a>

                        <span id="favoriteCount">已销售100</span>
                    </p>
                </div>        
            </div>
        </div>
        <div class="you_need_konw">
            <span>购买须知</span>
            <div class="notice">
                <p>1、高温天气，请您及时取奶、及时饮用。乳泰牛奶均为巴氏杀菌，需要低温保存，长时间暴露于室温下，牛奶新鲜度降低，容易变质，请将暂不饮用的牛奶放入冰箱保存。 <br>

                <p>2、清洁奶箱，保证卫生。乳品每天送递到奶箱中，奶箱长期使用后难免底部会有一些脏斑，请您及时擦洗奶箱，避免吸引蚊蝇，造成污染。</p>

                <p>3、牛奶和巧克力的搭配会使牛奶中的钙和巧克力中的草酸产生化学反应，生成“草酸钙”，草酸钙对人体有害，会导致缺钙、腹泻、毛发干枯、易骨折以及增加尿路结石。。</p>

                <p>4、很多人都会认为牛奶越浓越好，其实这是不科学的，当牛奶的浓度高出正常的比例，会引起腹泻、便秘、食欲不振，甚至拒食，还会引起急性出血性小肠炎。。</p>

                <p>5、牛奶几乎含有人体需要的所有营养元素，其中最主要的营养成分是蛋白质和钙质，这也是生命和健康的物质基础。人们喝牛奶的首要目的，应该是摄取蛋白质和钙质，而且牛奶中的这两种营养极易被人体消化吸收，尤其从钙吸收角度，是天然的高效补钙剂。因此多喝牛奶可以强身健体、美容营养、预防骨质疏松等。</p>
                <p>1、高温天气，请您及时取奶、及时饮用。乳泰牛奶均为巴氏杀菌，需要低温保存，长时间暴露于室温下，牛奶新鲜度降低，容易变质，请将暂不饮用的牛奶放入冰箱保存。 <br>

                <p>2、清洁奶箱，保证卫生。乳品每天送递到奶箱中，奶箱长期使用后难免底部会有一些脏斑，请您及时擦洗奶箱，避免吸引蚊蝇，造成污染。</p>

                <p>3、牛奶和巧克力的搭配会使牛奶中的钙和巧克力中的草酸产生化学反应，生成“草酸钙”，草酸钙对人体有害，会导致缺钙、腹泻、毛发干枯、易骨折以及增加尿路结石。。</p>

                <p>4、很多人都会认为牛奶越浓越好，其实这是不科学的，当牛奶的浓度高出正常的比例，会引起腹泻、便秘、食欲不振，甚至拒食，还会引起急性出血性小肠炎。。</p>

                <p>5、牛奶几乎含有人体需要的所有营养元素，其中最主要的营养成分是蛋白质和钙质，这也是生命和健康的物质基础。人们喝牛奶的首要目的，应该是摄取蛋白质和钙质，而且牛奶中的这两种营养极易被人体消化吸收，尤其从钙吸收角度，是天然的高效补钙剂。因此多喝牛奶可以强身健体、美容营养、预防骨质疏松等。</p>
            </div>           
        </div>
    </div>
    <!-- 详情 end -->

    <!--引入头部-->
    <div id="footer"></div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!--导入布局js，共享header和footer-->
    <script type="text/javascript" src="js/include.js"></script>
    <script src="js/getParameter.js"></script>
    <script>
    $(document).ready(function() {

        //自动播放
        goImg();
        // var timer = setInterval("auto_play()", 5000);
    });
    function goImg(){
        //焦点图效果
        //点击图片切换图片
        $('.little_img').on('mousemove', function() {
            $('.little_img').removeClass('cur_img');
            var big_pic = $(this).data('bigpic');
            $('.big_img').attr('src', big_pic);
            $(this).addClass('cur_img');
        });
        //上下切换
        var picindex = 0;
        var nextindex = 4;
        $('.down_img').on('click',function(){
            var num = $('.little_img').length;
            if((nextindex + 1) <= num){
                $('.little_img:eq('+picindex+')').hide();
                $('.little_img:eq('+nextindex+')').show();
                picindex = picindex + 1;
                nextindex = nextindex + 1;
            }
        });
        $('.up_img').on('click',function(){
            var num = $('.little_img').length;
            if(picindex > 0){
                $('.little_img:eq('+(nextindex-1)+')').hide();
                $('.little_img:eq('+(picindex-1)+')').show();
                picindex = picindex - 1;
                nextindex = nextindex - 1;
            }
        });
    }
    //自动轮播方法
    function auto_play() {
        var cur_index = $('.prosum_left dd').find('a.cur_img').index();
        cur_index = cur_index - 1;
        var num = $('.little_img').length;
        var max_index = 3;
        if ((num - 1) < 3) {
            max_index = num - 1;
        }
        if (cur_index < max_index) {
            var next_index = cur_index + 1;
            var big_pic = $('.little_img:eq(' + next_index + ')').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(' + next_index + ')').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        } else {
            var big_pic = $('.little_img:eq(0)').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(0)').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        }
    }


    $(function () {
       //1.获取rid
       var rid = getParameter("rid");
       
       //2.发送请求请求 route/findOne
        $.get("route/findOne",{rid:rid},function (route) {
            //3.解析数据填充html
            $("#rname").html(route.rname);
            $("#routeIntroduce").html(route.routeIntroduce);
            $("#price").html("¥"+route.price);
            $("#sname").html(route.seller.sname);
            $("#consphone").html(route.seller.consphone);
            $("#address").html(route.seller.address);
            //设置收藏次数
            $("#favoriteCount").html("已收藏"+route.count+"次");


            //图片展示

            var ddstr = '<a class="up_img up_img_disable"></a>';

            //遍历routeImgList
            for (var i = 0; i < route.routeImgList.length; i++) {
                var astr ;
                if(i >= 4){
                    astr = '<a title="" class="little_img" data-bigpic="'+route.routeImgList[i].bigPic+'" style="display:none;">\n' +
                        '                        <img src="'+route.routeImgList[i].smallPic+'">\n' +
                        '                    </a>';
                }else{
                    astr = '<a title="" class="little_img" data-bigpic="'+route.routeImgList[i].bigPic+'">\n' +
                        '                        <img src="'+route.routeImgList[i].smallPic+'">\n' +
                        '                    </a>';
                }


                ddstr += astr;
            }
            ddstr+='<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>';

            $("#dd").html(ddstr);

            //图片展示和切换代码调用
            goImg();
        });
    });


    $(function () {
       // 发送请求，判断用户是否收藏过该线路
        var rid = getParameter("rid");
        $.get("route/isFavorite",{rid:rid},function (flag) {
            if(flag){
                // 用户已经收藏过
                //<a  class="btn already" disabled="disabled">
                //设置收藏按钮的样式
                $("#favorite").addClass("already");
                $("#favorite").attr("disabled","disabled");

                //删除按钮的点击事件
                $("#favorite").removeAttr("onclick");
            }else{
                // 用户没有收藏
            }
        });



    });

    //点击收藏按钮触发的方法
    function addFavorite(){
        var rid = getParameter("rid");
        //1. 判断用户是否登录
        $.get("user/findOne",{},function (user) {
           if(user){
               //用户登录了
                //添加功能
                $.get("route/addFavorite",{rid:rid},function () {

                    //代码刷新页面
                    location.reload();
                });

           }else{
               //用户没有登录
               alert("您尚未登录，请登录");
               location.href="http://localhost/travel/login.html";
           }
        })
    }


    </script>
</body>

</html>